﻿<h2>@ViewBag.Title</h2>
<div class="alert alert-warning">注意：所有项均为必填项</div>
<div id="statusMsg" class="alert alert-info" style="display: none;">正在提交数据...</div>
<div>
    <p>
        <label for="person_name">姓名：</label>
        <input type="text" id="person_name" name="person_name" required />
        <span class="warningText" id="warning_pName" style="display: none;">姓名不能为空！</span>
    </p>
    <p>
        性别：
        <input type="radio" id="male" name="sex" value="男" />
        <label for="male">男</label>
        <input type="radio" id="female" name="sex" value="女" />
        <label for="female">女</label>
        <span class="warningText" id="warning_sex" style="display: none;">请选择性别！</span>
    </p>
    <p>
        <label for="birthday">出生日期：</label>
        <input type="text" id="birthday" name="birthday" readonly />
        @*<input type="text" id="test02" name="test02" readonly />*@
        <span class="warningText" id="warning_birthday" style="display: none;">请选择日期！</span>
    </p>
    <p>
        <button id="button_send" class="btn btn-primary">添加</button>
        <button class="btn btn-default" onclick="toHomePage();">返回主页</button>
    </p>
</div>
<div class="modal fade" id="dialog1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;执行结果</h4>
            </div>
            <div class="modal-body" id="dialog1_content"></div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="toHomePage();">确定</button>
            </div>
        </div>
    </div>
</div>

<script>
    var flags = new Array(false, false, false);

    $(function () {
        //jQuery UI DatetimePicker
        $("#birthday").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy-mm-dd"
        });


        //$('#test02').datetimepicker({
        //    format: "yyyy-mm-dd",
        //    autoclose: true,
        //    todayBtn: true,
        //    todayHighlight: true,
        //    showMeridian: true,
        //    pickerPosition: "bottom-left",
        //    language: 'zh-CN',//中文，需要引用zh-CN.js包
        //    startView: 2,//月视图
        //    minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
        //});
    });

    $("#button_send").on({
        click: function () {
            addData();
        },
    });

    //转到主页
    function toHomePage() {
        window.location.href = '/';
    }

    //检测Flag数组是否全为true
    function checkAllFlagsTrue(array) {
        for (var i = 0; i < array.length; i++) {
            if (!array[i]) {
                return false;
            }
        }
        return true;
    }

    function addData() {
        var button_send = $("#button_send");
        var statusMsg = $("#statusMsg");
        var slideTime = 300;//控制动画时间(ms)

        var val_pName = $.trim($("#person_name").val());//获取文本框的值，同时去掉首尾空格
        var checked_sex = $("input[name='sex']:checked");//获取单选组被选中的对象
        var val_birthday = $("#birthday").val();//获取文本框的值

        //警告文本对象数组
        var obj_warning = new Array($("#warning_pName"), $("#warning_sex"), $("#warning_birthday"));

        //表单检测
        flags[0] = (val_pName.length > 0);
        flags[1] = (checked_sex.length > 0);
        flags[2] = (val_birthday.length > 0);

        //根据检测结果决定是否显示相应的警告内容
        for (var i = 0; i < obj_warning.length; i++) {
            obj_warning[i].css("display", flags[i] ? "none" : "");
        }

        //检测通过后，提交数据
        if (checkAllFlagsTrue(flags)) {
            $.ajax({
                type: "POST",
                url: "/Home/AddData",
                data: {
                    pName: val_pName,
                    sex: checked_sex.val(),
                    s_birthday: val_birthday
                },
                beforeSend: function () {
                    button_send.prop({ "disabled": true });
                    statusMsg.slideDown(slideTime);
                },
                success: function (resp) {
                    statusMsg.slideUp(slideTime, function () {
                        $("#dialog1").modal({
                            backdrop: "static"
                        });
                        button_send.prop({ "disabled": false });
                        var resultText = (resp > 0) ? "添加成功" : "添加失败";
                        $("#dialog1_content").html(resultText);
                    });
                },
            });
        }
    }
</script>